import React from 'react'
import { Input } from '../components/common/Input'
import basicStyle from '../components/common/basic.scss'
import { WaitShowOrHideTypes } from '../common/enums'
import { WaitShowOrHideTypeSelector } from '../components/common/waitShowOrHideTypeSelector'
import { renderEditorOfElementWithExtSelector, renderLogOfElementWithExtSelector } from '../components/common/elementWithExtSelector'

export const WaitTypes = {
    htmlElement: {
        key: 'htmlElement',
        title: 'Html元素',
        requireBaseEnv: false,
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { timeout, waitTo } = data

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    <WaitShowOrHideTypeSelector inputClassName='width_80px' initValue={waitTo} onSelectItem={item => onChangeField(index, 'waitTo', item.code)} readOnly={readOnly} />
                    超时（毫秒）：<Input className='width_60px' value={timeout} placeholder='超时(毫秒)' type='number' onChange={timeout => onChangeField(index, 'timeout', +timeout)} min='0' readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            const { waitTo } = data

            let detail = ''
            switch (waitTo) {
                case WaitShowOrHideTypes.Show:
                    detail = '显示'
                    break
                case WaitShowOrHideTypes.Hide:
                    detail = '隐藏'
                    break
                default:
                    break;
            }

            return <div className={basicStyle.log_entry}>等待页面元素{renderLogOfElementWithExtSelector({ data })}{detail}</div>
        },
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
        appendExtData: (detail, dataWrapper) => {
            const { data } = detail
            const { elementSelectorId } = data
            const { element } = dataWrapper

            const elementItem = element.find(item => item.id === elementSelectorId)

            return {
                ...detail,
                data: {
                    ...detail.data,
                    element: elementItem
                }
            }
        },
    },
    duration: {
        key: 'duration',
        title: '延时',
        requireBaseEnv: false,
        renderEditor: ({ index, data, readOnly, onChangeField }) => {
            const { timeout } = data

            return (
                <React.Fragment>
                    时长（毫秒）：<Input className='width_60px' value={timeout} placeholder='时长(毫秒)' type='number' onChange={timeout => onChangeField(index, 'timeout', +timeout)} min='0' readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            const { timeout } = data
            return <div className={basicStyle.log_entry}>延时 {timeout}ms</div>
        },
        getRefIdMap: (data) => {
            return { ajax: 0, mock: 0, element: 0 }
        },
        appendExtData: (detail, dataWrapper) => {
            return { ...detail }
        },
    },
    navigation: {
        key: 'navigation',
        title: '页面跳转',
        requireBaseEnv: false,
        renderEditor: ({ index, data, readOnly, onChangeField }) => {
            const { timeout } = data

            return (
                <React.Fragment>
                    超时（毫秒）：<Input className='width_60px' value={timeout} placeholder='超时(毫秒)' type='number' onChange={timeout => onChangeField(index, 'timeout', +timeout)} min='0' readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            return <div className={basicStyle.log_entry}>等待页面跳转</div>
        },
        getRefIdMap: (data) => {
            return { ajax: 0, mock: 0, element: 0 }
        },
        appendExtData: (detail, dataWrapper) => {
            return { ...detail }
        },
    },
}

export class WaitTypeProvider {
    static getAllWaitTypes() {
        return Object
            .keys(WaitTypes)
            .map(key => ({
                ...WaitTypes[key],
                code: key
            }))
    }
}